import { getProfileAPI } from './apis/user';
// 权限控制
import type { RouteRecordRaw } from "vue-router";
import { getProfileAPI } from "./apis/user";
import router from "./router";

import { useUserStore } from "./stores/user";
import { getLocalToken } from "./utils/auth";
import { asyncRoutes } from "./router/asynvRoutes";

const WHITE_LIST = ["/login", "/404"];

/**
 * 处理一级路由数据
 */
const getFirstRoutePerms = (permsArr: string[]) => {
  const newArr = permsArr.map((item) => {
    return item.split(":")[0];
  });
  return [...new Set(newArr)];
};

// 根据权限标识过滤路由表
const getRoutes = (
  firstRoutePerms: string[],
  secondRoutePerms: string[],
  asyncRoutes: RouteRecordRaw[]
) => {
  // 根据一级和二级对动态路由表做过滤 return出去过滤之后的路由表
  // 1. 根据一级路由对动态路由表做过滤
  const firstRoutes = asyncRoutes.filter((route: RouteRecordRaw) => {
    return firstRoutePerms.includes(route.meta!.permission!);
  });
  console.log(firstRoutes);

  // 2. 对二级路由做过滤
  const lastRoutes = firstRoutes.map((item: RouteRecordRaw) => {
    return {
      ...item,
      children: item!.children!.filter((obj) =>
        secondRoutePerms.includes(obj.meta!.permission!)
      ),
    };
  });
  return lastRoutes;
};

// 处理二级路由权限数据
const getSecondRoutePerms = (permsArr: string[]) => {
  const newArr = permsArr.map((item) => {
    const arr = item.split(":");
    return `${arr[0]}:${arr[1]}`;
  });
  return [...new Set(newArr)];
};

// 2. 路由全局前置守卫
router.beforeEach(async (to, from, next) => {
  // 2.0 开启进度条
  NProgress.start();
  // 2.1 获取token
  const token = getLocalToken();
  // 2.2 判断是否有token
  if (token) {
    // 2.2.1 判断去的页面是否是登录页, 如果是则拦截到首页
    if (to.path === "/login") {
      next("/");
    } else {
      const store = useUserStore();
      if(!store.profile.id){
        // 2.2.2 获取用户权限数据
        const res = await store.getProfile();
        console.log(res, "2222");
        const menu = getFirstRoutePerms(res.permissions);
        console.log(menu);
        const sMenu = getSecondRoutePerms(res.permissions);
        console.log(sMenu);
        const perRoutes = getRoutes(menu, sMenu, asyncRoutes);
  
        // 4. 把动态路由表加入到路由系统中（当浏览器中访问路由的路径 显示渲染出来对应的组件）
        perRoutes.push(
          // 404 地址配置为*=》匹配不存在的地址，放到过滤动态路由规则后边
          {
            path: "/:pathMatch(.*)*",
            component: () => import("@/views/NotFound.vue"),
            meta: { hidden: true },
            children: [],
          }
        );
        perRoutes.forEach((route) => {
          router.addRoute(route);
        });
        next({...to});
      }
      next();
    }
  } else {
    // 2.2.2 判断是否在白名单
    if (!WHITE_LIST.includes(to.path)) {
      next("/login");
    } else {
      next();
    }
  }
});